<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <title>页面切换效果</title>

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no,email=no" />
    <link rel="stylesheet" href="./page.css" />
  </head>
  <body>
    <div class="m-animate">
      <div class="pages" id="main">
        <div class="page ani page-1"></div>
        <div class="page ani page-2"></div>
        <div class="page ani page-3"></div>
        <div class="page ani page-4"></div>
        <div class="page ani page-5"></div>
        <div class="page ani page-6"></div>
        <div class="page ani page-7"></div>

        <div class="con">
          <p>Page switch</p>
          <select id="outClass">
            <option>选择动画...</option>
            <optgroup label="fade out">
              <option value="fade-out">fade-out</option>
              <option value="fade-out-up">fade-out-up</option>
              <option value="fade-out-right">fade-out-right</option>
              <option value="fade-out-down">fade-out-down</option>
              <option value="fade-out-left">fade-out-left</option>
            </optgroup>
            <optgroup label="elastic">
                <option value="elastic-x">elastic-x</option>
                <option value="elastic-y">elastic-y</option>
            </optgroup>
            <optgroup label="elastic out">
                <option value="elastic-out">elastic-out</option>
                <option value="elastic-out-up">elastic-out-up</option>
                <option value="elastic-out-right">elastic-out-right</option>
                <option value="elastic-out-down">elastic-out-down</option>
                <option value="elastic-out-left">elastic-out-left</option>
            </optgroup>
            <optgroup label="flip">
                <option value="flip">flip</option>
                <option value="flip-in-x">flip-in-x</option>
                <option value="flip-in-y">flip-in-y</option>
                <option value="flip-out-x">flip-out-x</option>
                <option value="flip-out-y">flip-out-y</option>
            </optgroup>
            <optgroup label="roll">
                <option value="roll-in-right">roll-in-right</option>
                <option value="roll-in-left">roll-in-left</option>
                <option value="roll-out-right">roll-out-right</option>
                <option value="roll-out-left">roll-out-left</option>
            </optgroup>
            <optgroup label="speed">
                <option value="speed-in-right">speed-in-right</option>
                <option value="speed-in-left">speed-in-left</option>
                <option value="speed-out-right">speed-out-right</option>
                <option value="speed-out-left">speed-out-left</option>
            </optgroup>
            <optgroup label="rotate out">
                <option value="rotate-out">rotate-out</option>
                <option value="rotate-out-up-right">rotate-out-up-right</option>
                <option value="rotate-out-up-left">rotate-out-up-left</option>
                <option value="rotate-out-down-right">rotate-out-down-right</option>
                <option value="rotate-out-down-left">rotate-out-down-left</option>
            </optgroup>
            <optgroup label="zoom out">
                <option value="zoom-out">zoom-out</option>
                <option value="zoom-out-up">zoom-out-up</option>
                <option value="zoom-out-right">zoom-out-right</option>
                <option value="zoom-out-down">zoom-out-down</option>
                <option value="zoom-out-left">zoom-out-left</option>
            </optgroup>
            <optgroup label="single">
                <option value="flash">flash</option>
                <option value="shake">shake</option>
                <option value="pulse">pulse</option>
                <option value="stretch">stretch</option>
                <option value="extrusion">extrusion</option>
                <option value="swing">swing</option>
                <option value="sling">sling</option>
                <option value="wobble">wobble</option>
                <option value="hinge">hinge</option>
            </optgroup>
          </select>
          <select id="inClass">
              <option value="">Select inAnimate...</option>
              <optgroup label="fade in">
                  <option value="fade-in">fade-in</option>
                  <option value="fade-in-up">fade-in-up</option>
                  <option value="fade-in-right">fade-in-right</option>
                  <option value="fade-in-down">fade-in-down</option>
                  <option value="fade-in-left">fade-in-left</option>
              </optgroup>
              <optgroup label="elastic">
                  <option value="elastic-x">elastic-x</option>
                  <option value="elastic-y">elastic-y</option>
              </optgroup>
              <optgroup label="elastic in">
                  <option value="elastic-in">elastic-in</option>
                  <option value="elastic-in-up">elastic-in-up</option>
                  <option value="elastic-in-right">elastic-in-right</option>
                  <option value="elastic-in-down">elastic-in-down</option>
                  <option value="elastic-in-left">elastic-in-left</option>
              </optgroup>
              <optgroup label="flip">
                  <option value="flip">flip</option>
                  <option value="flip-in-x">flip-in-x</option>
                  <option value="flip-in-y">flip-in-y</option>
                  <option value="flip-out-x">flip-out-x</option>
                  <option value="flip-out-y">flip-out-y</option>
              </optgroup>
              <optgroup label="roll">
                  <option value="roll-in-right">roll-in-right</option>
                  <option value="roll-in-left">roll-in-left</option>
                  <option value="roll-out-right">roll-out-right</option>
                  <option value="roll-out-left">roll-out-left</option>
              </optgroup>
              <optgroup label="speed">
                  <option value="speed-in-right">speed-in-right</option>
                  <option value="speed-in-left">speed-in-left</option>
                  <option value="speed-out-right">speed-out-right</option>
                  <option value="speed-out-left">speed-out-left</option>
              </optgroup>
              <optgroup label="rotate in">
                  <option value="rotate-in">rotate-in</option>
                  <option value="rotate-in-up-right">rotate-in-up-right</option>
                  <option value="rotate-in-up-left">rotate-in-up-left</option>
                  <option value="rotate-in-down-right">rotate-in-down-right</option>
                  <option value="rotate-in-down-left">rotate-in-down-left</option>
              </optgroup>
              <optgroup label="zoom in">
                  <option value="zoom-in">zoom-in</option>
                  <option value="zoom-in-up">zoom-in-up</option>
                  <option value="zoom-in-right">zoom-in-right</option>
                  <option value="zoom-in-down">zoom-in-down</option>
                  <option value="zoom-in-left">zoom-in-left</option>
              </optgroup>
              <optgroup label="single">
                  <option value="flash">flash</option>
                  <option value="shake">shake</option>
                  <option value="pulse">pulse</option>
                  <option value="stretch">stretch</option>
                  <option value="extrusion">extrusion</option>
                  <option value="swing">swing</option>
                  <option value="sling">sling</option>
                  <option value="wobble">wobble</option>
                  <option value="hinge">hinge</option>
              </optgroup>
          </select>
          <span class="yo-btn yo-btn-switch yo-btn-stacked" id="iterateEffects">下一页</span>
        </div>
      </div>
    </div>

    <script src="http://qunarzz.com/zepto/prd/zepto-1.0.0.js"></script>
    <script>
      var PageTransitions = (function(){
        var $main = $('#main'),
            $pages = $main.children('.page'),
            $iterate = $('#iterateEffects'),
            $outClass = $('#outClass'),
            $inClass = $('#inClass'),
            animcursor = 1,
            pagesCount = $pages.length,
            current = 0,
            isAnimating = false,
            endCurrPage = false,
            endNextPage = false;

        function init(){
          $pages.each(function(){
            var $page = $(this);
            $page.data('originalClassList', $page.attr('class'));
          });
          $pages.eq(current).addClass('current');
          $iterate.on('click', function(){
            if(isAnimating) {
                return false;
            }
            if( $outClass.val()=='' && $inClass.val() == '' ){
                return false;
            }
            nextPage($outClass.val(),$inClass.val());
          });
        }

        function nextPage(outClass, inClass){
          if(isAnimating) {
              return false;
          }

          isAnimating = true;

          var $currPage = $pages.eq(current);

          if(current < pagesCount - 1) {
              ++current;
          } else {
              current = 0;
          }

          var $nextPage = $pages.eq(current).addClass('current');

          if(outClass != ''){
              $currPage.addClass(outClass).css('z-index','2').on("webkitAnimationEnd animationEnd", function() {
                  $currPage.off("webkitAnimationEnd animationEnd");
                  $currPage.css('z-index','0');
                  endCurrPage = true;
                  //if(endNextPage) {
                      onEndAnimation($currPage, $nextPage);
                  //}
              });
          }

          if(inClass != ''){
              $nextPage.addClass(inClass).on("webkitAnimationEnd animationEnd", function() {
                  $nextPage.off("webkitAnimationEnd animationEnd");
                  endNextPage = true;
                  //if(endCurrPage) {
                      onEndAnimation($currPage, $nextPage);
                  //}
              });
          }

      }

      function onEndAnimation($outpage, $inpage) {
          endCurrPage = false;
          endNextPage = false;
          resetPage($outpage, $inpage);
          isAnimating = false;
      }

      function resetPage($outpage, $inpage) {
          $outpage.attr('class', $outpage.data('originalClassList'));
          $inpage.attr('class', $inpage.data('originalClassList') + ' current');
      }

      return { init : init };
      }());

      $(function(){
          PageTransitions.init();
      });
    </script>
  </body>
</html>
